<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>出错了 - 页面未找到</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
            color: #333;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            line-height: 1.6;
        }

        .error-container {
            max-width: 600px;
            width: 100%;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            text-align: center;
            padding: 40px 30px;
        }

        .status-code {
            font-size: 8rem;
            font-weight: 800;
            color: #4361ee;
            margin-bottom: 10px;
            line-height: 1;
            text-shadow: 2px 2px 4px rgba(67, 97, 238, 0.1);
        }

        .title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 12px;
            color: #2b2d42;
        }

        .message {
            font-size: 1.1rem;
            color: #6c757d;
            margin-bottom: 24px;
        }

        .details {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 16px;
            margin-top: 20px;
            font-size: 0.95rem;
            text-align: left;
            color: #495057;
            border: 1px solid #e9ecef;
        }

        .details h3 {
            margin-bottom: 10px;
            font-size: 1.1rem;
            color: #4361ee;
        }

        .details p {
            margin: 6px 0;
        }

        .btn {
            display: inline-block;
            margin-top: 20px;
            padding: 12px 28px;
            background: #4361ee;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn:hover {
            background: #3a56e4;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
        }

        .footer {
            margin-top: 30px;
            font-size: 0.85rem;
            color: #adb5bd;
        }

        @media (max-width: 600px) {
            .status-code {
                font-size: 6rem;
            }
            .title {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark top-navbar">
        <div class="container-fluid">
            <a class="navbar-brand fw-bold" href="/dashboard">
                <i class="bi bi-box-seam-fill me-2"></i>商品管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">
                            <i class="bi bi-speedometer2"></i> Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/product/list">
                            <i class="bi bi-box"></i> 商品管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/category/list">
                            <i class="bi bi-tags"></i> 分类管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/log/list">
                            <i class="bi bi-clock-history"></i> 操作日志
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/doc">
                            <i class="bi bi-book"></i> API文档
                        </a>
                    </li>
                </ul>
                <div class="d-flex align-items-center">
                    <!-- 用户信息 -->
                    <div th:if="${currentUser}" class="me-3 text-white">
                        <small>欢迎,</small>
                        <strong th:text="${currentUser.realName ?: currentUser.username}"></strong>
                    </div>
                    
                    <a href="/product/add" class="btn btn-light btn-sm me-2">
                        <i class="bi bi-plus-circle"></i> 新增商品
                    </a>
                    <a href="/druid" target="_blank" class="btn btn-outline-light btn-sm me-2">
                        <i class="bi bi-speedometer"></i> 监控
                    </a>
                    <!-- 登出按钮 -->
                    <a href="/auth/logout" class="btn btn-outline-light btn-sm">
                        <i class="bi bi-box-arrow-right"></i> 登出
                    </a>
                </div>
            </div>
        </div>
    </nav>
<div class="error-container">
    <div class="status-code" th:text="${status} ?: '500'">500</div>
    <h1 class="title" th:text="${error} ?: '服务器内部错误'">服务器内部错误</h1>
    <p class="message">很抱歉，服务器在处理您的请求时遇到了问题。</p>

    <a href="/" class="btn">返回首页</a>

    <!-- 可选：仅在开发环境显示详细信息（生产环境建议关闭） -->
    <div class="details" th:if="${#bools.isTrue(@environment.getProperty('app.show-error-details', 'false'))}">
        <h3>错误详情</h3>
        <p><strong>状态码：</strong><span th:text="${status}">500</span></p>
        <p><strong>错误类型：</strong><span th:text="${error}">Internal Server Error</span></p>
        <p><strong>时间：</strong><span th:text="${timestamp}">2025-10-05 15:31:48</span></p>
        <p><strong>路径：</strong><span th:text="${path}">/doc/api</span></p>
    </div>

    <div class="footer">
        &copy; <span th:text="${#dates.year(#dates.createNow())}">2025</span> 您的应用名称
    </div>
</div>
</body>
</html>